<!--  -->
<template>
  <div class="">
    echarts案例
    <div
      ref="compEchartsDemo"
      :style="{ width: '300px', height: '300px' }"
    ></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      center_text: "运营商1"
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.compEchartsDemo);
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          icon: "square",
          y: "bottom"
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "40%",
            style: {
              text: this.center_text,
              textAlign: "center",
              fill: "#0B1D2C",
              fontSize: 18,
              fontFamily: "PingFangSC-Semibold"
            }
          }
        ],
        series: [
          {
            name: "访问来源",
            type: "pie",
            top: "-50px",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "18",
                fontWeight: "bold"
              }
            },
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" }
            ]
          }
        ]
      });

      myChart.on("mouseover", params => {
        {
          myChart.setOption({
            graphic: [
              {
                style: {
                  text: params.name
                }
              }
            ]
          });
        }
      });
      myChart.on("mouseout", () => {
        myChart.setOption({
          graphic: [
            {
              style: {
                text: this.center_text
              }
            }
          ]
        });
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.drawLine();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
